<html>
	<head>
		<title>Colombian Crush</title>
		<script>
			var elm1, elm2, tmpElm;
			var seleccionado=false;
			var contador=0;
			
			function asignarID() {
				contador=contador+1
				return contador;
			}
			
			function cambiarElemento(id) {
				if(seleccionado==false) {
					elm1 = document.getElementById(id)
					throw(id)
					seleccionado=true;
				} else {
					
					throw(id)
					elm2 = document.getElementById(id)
					tmpElm = elm1.getAttribute("src")
					elm1.src = elm2.getAttribute("src")
					elm2.src = tmpElm
					seleccionado=false
				}	
			}

		    function actualizar()
		    {
				var tabla = document.getElementById("tablero")
				var matriz = []
				for (var i=0; i<tabla.rows.length; i++) {
					var filamatriz = []
					var filatabla = tabla.rows[i]
					for (var j=0; j<filatabla.cells.length; j++) {
						filamatriz.push(filatabla.row.cells[j].name)
					}
					matriz.push(filatabla)
				}
				return matriz
		    }
		    			
			function my_onkeydown_handler() {
			    switch (event.keyCode) {
			        case 116 : // 'F5'
			            event.returnValue = false;
			            event.keyCode = 0;
			            window.status = "We have disabled F5";
			            break;
			    }
			}
			
			function zoom() {
				document.body.style.zoom="100%"
			}
		</script>
		<style type="text/css">
			body {
				zoom: 100%;
				background-image:url('https://201320-modelos-2.googlecode.com/svn/trunk/colombian%20crush/static/bg_00.jpg');
				background-repeat:no-repeat;
			}
			td {
				background-color='#696969'
				opacity=0;
			}
			.opacity {
				background-color=dimgray
				opacity=0
				filter:alpha(opacity=0)
			}
		</style>
	</head>
	
	<body onkeydown="my_onkeydown_handler()" >
		<div id="puntaje" align="left">
			<p>Puntaje: {{puntaje}}</p>
		</div>
		<div id="contTablero" align="center">
			<form id="matriz" action="" method="POST" onSubmit="return actualizar()">{% csrf_token %}
				<table border="5" id="tablero" name="tablero" align="center">
					{% for fila in tabla %}
						<tr>
						{% for columna in fila %}
							<td onMouseOver="this.opacity=0.5" onMouseout="this.opacity=0">
								<input type="image" name="{{columna}}" src="{{columna.dibujar}}" 
								onload="this.id=asignarID()" onclick="cambiarElemento(this.id)"/>
							</td>
						{% endfor %}
						</tr>
					{% endfor %}
				</table>
			</form>
		</div>
	</body>

</html>
